<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping Cart</title>
<style type="text/css">
@import "dijit/themes/tundra/tundra.css";

.target {
	border: 2px dotted gray;
	width: 200px;
	height: 350px;
	background-color: pink;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
	overflow: auto
}

.source {
	height: 400px;
	width: 270px;
	background-color: ivory;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.itemtable {
	border: 1px solid gray;
	text-align: left;
	background-color: rgb(153, 255, 255);
	width: 250px;
	font-size: 12px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.avatartable {
	border: 1px dotted gray;
	text-align: left;
	background-color: rgb(153, 255, 255);
	width: 150px;
	font-size: 10px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.avatartable img {
	width: 25px;
	height: 25px
}

.targettable {
	border: 1px dotted gray;
	text-align: left;
	background-color: ivory;
	width: 150px;
	font-size: 10px;
	-moz-border-radius: 8pt 8pt;
	radius: 8pt;
}

.targettable img {
	width: 25px;
	height: 25px
}

.rating {
	color: green;
	font-family: Serif;
	font-size: 14px;
}

.dojoDndItemOver {
	background: skyblue;
	border: 1px dotted gray;
}

.dojoDndItemBefore {
	border-top: 2px dotted black;
}

.dojoDndItemAfter {
	border-bottom: 2px dotted black;
}

.target .dojoDndItemAnchor {
	border: 1px solid black;
}

.dojoDndAvatar {
	font-size: 75%;
	color: black;
}

.dojoDndAvatar td {
	padding-left: 20px;
	padding-right: 4px;
	height: 20px
}

.dojoDndAvatarHeader {
	background: #ccc;
	background-repeat: no-repeat;
}

.dojoDndAvatarItem {
	background: #eee;
}

.dojoDndMove .dojoDndAvatarHeader {
	background-image: url('dojo/resources/images/dndNoMove.png');
}

.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {
	background-image: url('dojo/resources/images/dndMove.png');
}
</style>
<script type="text/javascript" src="dojo/dojo.js.uncompressed.js"
	djConfig="parseOnLoad: true, isDebug: false, usePlainJson: true"></script>
<script type="text/javascript">
	dojo.require("dojo.dnd.source");
	dojo.require("dijit.Dialog");
	dojo.require("dojo.parser");
	dojo.require("dijit.form.Button");
	var all_nodes, c1, c2; //Retrives list of all items in the shop from server.function GetAllItems(){	dojo.xhrGet( {		url: "Test.php?action=get_all_items",		handleAs: "json",		load: function(responseObject, ioArgs) {			all_nodes = responseObject;			c1.selectAll();			c1.deleteSelectedNodes();			c1.clearItems();			c1.insertNodes(false, all_nodes.items);			dijit.byId('dialog1').hide();}			})} //Sends all items in the shopping cart back to server for savingfunction SaveCartItems(){		dijit.byId('dialog1').show(); //Show busy dialog box		var x = c2.getAllNodes();		var y = JsToJson(x); //Get JSON for cart items		var kw = {			url: "Test.php?action=save_cart_items",			content: {"cart_data":y},			load: function(responseObject, ioArgs) {dijit.byId('dialog1').hide();}				}		dojo.xhrPost(kw); }  //Fetches all the cart items saved by user before logging out , the last time.function GetCartItems(){		dojo.xhrGet( {			url: "Test.php?action=get_cart_items",			handleAs: "json",			load: function(responseObject, ioArgs) {				nodes = responseObject;				c2.selectAll();				c2.deleteSelectedNodes();				c2.clearItems();				c2.insertNodes(false, nodes.items);				return responseObject;}				})}  //Sends a reset message to server. Used for clearing last saved state in session.function Reset(){		dijit.byId('dialog1').show();		c2.selectAll();		c2.deleteSelectedNodes();		c2.clearItems(); 		dojo.xhrGet( {			url: "Test.php?action=reset",			handleAs: "json",			load: function(responseObject, ioArgs) {dijit.byId('dialog1').hide();}				}) } //Node creator function. Used to create UI for individual shop itemvar node_creator = function(data, hint){	var types = [];	var node = dojo.doc.createElement("div");	types.push("cartitem"); 	var html;	if(hint !='avatar')	{			html = "<table class='itemtable' cellpadding='2' cellspacing='0'>" ;		html += "<tbody><tr><td width='50px'>" ;		html+= "<img src='"+data.img_url+"'/><br/>";		html += "</td><td><b>";		html+= data.name+"</b><br/>$";		html += data.price+"<br/>";		html+= data.description+"<br/>";		html += GetRatingHTML(data.rating)+"<br/></td></tr></tbody></table>";	}	else	{		html = "<table class='avatartable' cellpadding='2' cellspacing='0'>" ;		html += "<tbody><tr><td width='50px'>" ;		html+= "<img src='"+data.img_url+"'/><br\/>";		html += "</td><td>";		html+= data.name+"<br/>$";		html += data.price+"<br/></td></tr></tbody></table>";	}	node.innerHTML = html; 	node.id = dojo.dnd.getUniqueId();	return {node: node, data: data, type: types};}; //Node creator function used to create UI for shopping cart items.var targetnode_creator = function(data, hint){	var types = [];	types.push('cartitem');	var node = dojo.doc.createElement("div");	dojo.addClass(node,"targettable");	var html;	html = "<table cellpadding='2' cellspacing='0'>" ;	html += "<tbody><tr><td width='50px'>" ;	html+= "<img src='"+data.img_url+"'/><br\>";	html += "</td><td>";	html+= data.name+"<br/></td><td align=right>$";	html += data.price+"</td></tr></tbody></table>";	node.innerHTML = html;	node.id = dojo.dnd.getUniqueId();	return {node: node, data: data, type: types};}; //Initializer function, called on body.onloadvar init = function(){ 	dijit.byId('dialog1').show();   	c1 = new dojo.dnd.Source("c1", {creator: node_creator,accept: ["item"]});   	c2 = new dojo.dnd.Source("c2", { creator: targetnode_creator ,accept: ["cartitem"],copyOnly: false});   	GetCartItems();   	GetAllItems(); }; //Returns HTML for showing rating based on numeric valuefunction GetRatingHTML(rat){	x = "<span class='rating'>";	for(i =0;i<rat;i++)		x += "* ";	x+="</span>";	return x;} //Accepts a collection of items, and returns JSON text for the same.function JsToJson(items){	var y = "{'items': [";	var n;	for(i =0;i<items.length;i++)	{ 	var jsnode = c2.getItem(items[i].id);   		y+= DataToJson(jsnode.data);	}	if(y[y.length-1] == ",")y = y.substring(0,y.length-1);	y += "]}";	return y;} // Returns JSON fragment for a single item.function DataToJson(data){var x= "{'id':"+"'"+data.id+"',";x += "'name':"+"'"+data.name+"',";x += "'price':"+"'"+data.price+"',";x += "'rating':"+"'"+data.rating+"',";x += "'description':"+"'"+data.description+"',";x += "'img_url':"+"'"+data.img_url+"'},";return x; }  dojo.addOnLoad(init);
</script>
</head>
<body style="font-size: 12px;" class="tundra">
<table width="70%">
	<tr>
		<td>
		<h1>Dojo Shopping Cart</h1>
		Simply drag items and drop it on your shopping cart. To add a item
		more than once, drag it from the shopping cart , holding the CTRL key
		and drop it on the cart.</td>
		<td align="right">
		<button dojoType="dijit.form.Button" onclick="SaveCartItems();">Save</button>
		<button dojoType="dijit.form.Button"
			onclick="window.location ='logout.html';">Logout</button>
		<button dojoType="dijit.form.Button" onclick="Reset();">Reset</button>
		</td>
	</tr>
</table>
<br />
<hr width="80%" align="left">
<table width="80%">
	<tr>
		<td>Todays Special</td>
		<td>Your Shopping Cart</td>
	</tr>
	<tr valign="top">
		<td width="70%" align="left">
		<div id="c1" class="source"></div>
		</td>
		<td width="30%" align="left">
		<div id="c2" class="target"></div>
		</td>
	</tr>
</table>
<div dojoType="dijit.Dialog" id="dialog1" title="Processing"
	style="width: 200px; background-color: gray">Please Wait ....</div>
</body>
</html>
